import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

// 生活指数项组件
// 用于显示各种生活指数，如穿衣指数、洗车指数等
const LifeIndexItem = ({ data }) => {
  // 根据指数类型返回对应的图标名称
  const getIconName = (type) => {
    switch (type) {
      case '1': // 运动指数
        return 'bicycle';
      case '2': // 洗车指数
        return 'car';
      case '3': // 穿衣指数
        return 'shirt';
      case '5': // 紫外线指数
        return 'sunny';
      case '6': // 旅游指数
        return 'airplane';
      case '8': // 舒适度指数
        return 'thermometer';
      case '9': // 感冒指数
        return 'medkit';
      case '10': // 空气污染扩散指数
        return 'leaf';
      default:
        return 'information-circle';
    }
  };

  // 根据指数类型返回对应的名称
  const getTypeName = (type) => {
    switch (type) {
      case '1': return '运动指数';
      case '2': return '洗车指数';
      case '3': return '穿衣指数';
      case '5': return '紫外线指数';
      case '6': return '旅游指数';
      case '8': return '舒适度指数';
      case '9': return '感冒指数';
      case '10': return '空气污染扩散指数';
      default: return '其他指数';
    }
  };

  // 根据指数等级返回对应的颜色
  const getLevelColor = (level) => {
    switch (level) {
      case '1': return '#52c41a'; // 优/适宜
      case '2': return '#52c41a'; // 良好
      case '3': return '#faad14'; // 中等
      case '4': return '#ff7a45'; // 较差
      case '5': return '#f5222d'; // 很差
      default: return '#1890ff'; // 默认蓝色
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.iconContainer}>
        <Ionicons 
          name={getIconName(data.type)} 
          size={24} 
          color="#fff" 
        />
      </View>
      
      <View style={styles.contentContainer}>
        <View style={styles.header}>
          <Text style={styles.title}>{getTypeName(data.type)}</Text>
          <Text 
            style={[
              styles.level, 
              { color: getLevelColor(data.level) }
            ]}
          >
            {data.category}
          </Text>
        </View>
        
        <Text style={styles.text} numberOfLines={2}>
          {data.text}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
  },
  iconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  contentContainer: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 4,
  },
  title: {
    fontSize: 16,
    fontWeight: '500',
    color: '#fff',
  },
  level: {
    fontSize: 14,
    fontWeight: '500',
  },
  text: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
    lineHeight: 20,
  },
});

export default LifeIndexItem;